<template>
	<div class="section" ref="parent">
		<div class="border-row"></div>
		<div class="border-col"></div>
		<div class="section-header">驻温高校毕业生就业流向地分布占比</div>
		<div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
	</div>
</template>
<script>
import { getEmploymentArea } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: [
				{ value: 0, name: '华北' },
				{ value: 0, name: '西北' },
				{ value: 0, name: '西南' },
				{ value: 0, name: '华南' },
				{ value: 0, name: '华中' },
				{ value: 0, name: '华东' },
				{ value: 0, name: '东北' }
			]
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			console.log(this.dateProp)
			this.jz=false
			getEmploymentArea(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				if (data && data.length > 0) {
					this.chartsData = data;
				}else{
					
				}
				this.chartInit();
			});
			// return this.chartInit();
		},
		chartInit() {
			let option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					right: 120,
					top: 20,
					data: ['华北', '西北', '西南', '华南', '华中', '华东', '东北'],
					textStyle: {
						color: '#8ebafb',
						fontSize: 14
					},
					formatter: name => {
						let thisIndex = this.chartsData.findIndex(value => {
							return value.name === name;
						});
						let all = eval(this.chartsData.map(v => v.value).join('+')) / 100;
						let percent = parseFloat((this.chartsData[thisIndex].value / all).toFixed(2));
						return name + ' ' + percent + '%';
					}
				},
				series: [
					{
						name: '流向地',
						type: 'pie',
						radius: [20, 80],
						center: ['30%', '50%'],
						roseType: 'area',
						data: this.chartsData
					}
				],
				color: ['#4c7ef0', '#b86cc6', '#ff7899', '#7fe5ff', '#fed866', '#5eca41', '#16c88b']
			};

			let chart = this.$echarts.init(this.$refs.charts);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section
	width 100%
	height 100%
</style>
